<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>乐在购物商家后台—添加商品</title>
    <link th:include="common/common_mer :: #com_css">
    <!--图片裁剪-->
    <link rel="stylesheet" type="text/css" href="/static/plug-in/image-cut/css/normalize.css" />
    <style>
        #clipArea {
            margin: 20px;
            height: 300px;
        }
        #file,
        #clipBtn {
            margin: 20px;
        }
        #view {
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body class="sticky-header">
<section>
    <!--左部标签栏-->
    <div th:replace="common/common_mer :: #com_leftmenu"></div>
    <div class="main-content" >
        <!--顶部导航栏-->
        <div th:replace="common/common_mer :: #com_headermenu"></div>
        <div class="top"></div>
        <!--主体内容-->
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            商品添加
                            <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                            </span>
                        </div>
                        <div class="panel-body">
                            <div th:replace="common/common_mer :: #com_alert"></div>
                            <form role="form" id="GoodsForm">
                                <!--商品名称-->
                                <div class="col-md-10 form-group">
                                    <label for="goods_name" class="control-label"><strong>商品名称:</strong></label>
                                    <input id="goods_name" name="goods_name" type="text" placeholder="请输入商品名称" oninput="titleInput('goods_name','t_goods_name',15)" class="form-control" autofocus required>
                                    <p id="t_goods_name" class="help-block">请输入商品的名陈（字数限制15字）</p>
                                </div>
                                <!--商品类型-->
                                <div class="col-md-10 form-group">
                                    <label for="goods_name" class="control-label"><strong>商品类型:</strong></label>
                                    <select id="goods_type" name="goods_type" class="form-control" required>
                                    </select>
                                    <p id="t_goods_type" class="help-block">请选择商品的类型</p>
                                </div>
                                <!--商品简介-->
                                <div class="col-md-10 form-group">
                                    <label for="goods_introduction" class="control-label"><strong>商品简介:</strong></label>
                                    <textarea id="goods_introduction" name="goods_introduction" rows="2" maxlength="50" type="text" placeholder="请输入商品简介（商品规格大小...）" oninput="titleInput('goods_introduction','t_goods_introduction',50)" class="form-control" required></textarea>
                                    <p id="t_goods_introduction" class="help-block">请输入商品的简介（字数限制50字）</p>
                                </div>
                                <!--商品图片-->
                                <div class="col-md-10 form-group">
                                    <label for="image" class="control-label"><strong>商品图片：</strong></label>
                                    <div class="text-center" style="background-color: #d6d6d6;display: table;padding: 8px" data-toggle="modal" data-target="#img_cut">
                                        <div id="show" style="text-align: center;width: 150px;height: 150px;background-color: white;background-repeat: no-repeat; background-position: center center; background-size: contain;" ></div>
                                        <span class="btn btn-default" style="margin-top: 8px"><i class="fa fa-picture-o"></i> 选择图片</span>
                                    </div>
                                    <input id="image" type="hidden" name="image" />
                                </div>
                                <!-- 图片裁剪模态框（Modal） -->
                                <div class="modal fade" id="img_cut" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                    &times;
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">
                                                    选择图片裁剪
                                                </h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div id="clipArea"></div>
                                                </div>
                                                <div class="row text-center">
                                                    <div class="col-md-9">
                                                        <input type="file" id="file">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <button class="btn btn-search btn-lg" id="clipBtn" onclick="return false;">截取图片</button>
                                                    </div>
                                                </div>
                                                <div class="row text-center">
                                                    <div id="view" style="background-repeat: no-repeat; background-position: center center; background-size: contain;"></div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                                    关闭
                                                </button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>
                                <!--商品价格-->
                                <div class="col-md-10 form-group">
                                    <label for="goods_price" class="control-label"><strong>商品价格：</strong></label>
                                    <div class="iconic-input">
                                        <i class="fa fa-cny"></i>
                                        <input id="goods_price"name="goods_price" type="number"min="0.01" step="0.01" max="999999" placeholder="请输入商品价格" class="form-control" required>
                                        <p id="t_goods_price" class="help-block">价格范围：0.01~999999元</p>
                                    </div>
                                </div>
                                <!--商品库存-->
                                <div class="col-md-10 form-group">
                                    <label for="goods_num" class="control-label"><strong>商品库存：</strong></label>
                                    <div class="iconic-input">
                                        <i class="fa fa-plus-square"></i>
                                        <input id="goods_num" name="goods_num" type="number" min="0" step="1" max="99999999" placeholder="请输入商品库存" class="form-control" required>
                                        <p id="t_goods_num" class="help-block">库存范围：0~99999999件</p>
                                    </div>
                                </div>
                                <!--表单提交-->
                                <div class="col-md-10 form-group text-center">
                                    <button class="btn btn-success btn-lg submit" onclick="btn_submit();return false;"><i class="fa  fa-check-square-o"></i> 添加商品</button>
                                    <button class="btn btn-default btn-lg" onclick="form_reset();return false;"><i class="fa  fa-refresh"></i> 重置</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom"></div>
        <div th:replace="common/common_mer :: #com_footer"></div>
    </div>
</section>

<div th:replace="common/common_mer :: #com_js"></div>


<!--<script th:src="@{/static/my_js/mer/orderlist.js}"></script>-->
<!--表格-->
<script type="text/javascript" src="/static/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/js/data-tables/DT_bootstrap.js"></script>
<script src="/static/js/editable-table.js"></script>
<!--图片裁剪-->
<script src="/static/plug-in/image-cut/js/iscroll-zoom.js"></script>
<script src="/static/plug-in/image-cut/js/hammer.js"></script>
<script src="/static/plug-in/image-cut/js/lrz.all.bundle.js"></script>
<script src="/static/plug-in/image-cut/js/jquery.photoClip.js"></script>

<script src="/static/my_js/input.js"></script>
<script src="/static/my_js/img-cut.js"></script>
<script src="/static/my_js/mer/addGoods.js"></script>
<script>
    jQuery(document).ready(function() {
        data1();
    });
</script>
</body>
</html>